<template>
  <div class="_wz_safeProduction">
    <!--    左边-->
    <div class="_wz_safeProduction_left">
      <div class="_wz_safeProduction_left_list" style="margin-bottom: 10px;">
        <div>企业分类</div>
      </div>
      <div class="_wz_safeProduction_left_list">
        <div>企业分类</div>
      </div>
    </div>
    <!--    中间-->
    <div class="_wz_safeProduction_middle">
      <div class="_wz_safeProduction_middle_left">
        <div class="_wz_safeProduction_middle_left_list">1</div>
        <div class="_wz_safeProduction_middle_left_list">2</div>
        <div class="_wz_safeProduction_middle_left_list">3</div>
      </div>
      <div class="_wz_safeProduction_middle_right">
        <div class="_wz_safeProduction_middle_right_top">
          <div>1</div>
          <div>2</div>
        </div>
        <div class="_wz_safeProduction_middle_right_bottom">

          <div class="_wz_safeProduction_middle_right_bottom_list">1</div>
          <div class="_wz_safeProduction_middle_right_bottom_list">2</div>
          <div class="_wz_safeProduction_middle_right_bottom_list">3</div>

        </div>

      </div>
    </div>


    <!--    右边-->
    <div class="_wz_safeProduction_right">
      <div class="_wz_safeProduction_right_list" style="margin-bottom: 10px;">
        <div>企业分类</div>
      </div>
      <div class="_wz_safeProduction_right_list">
        <div>企业分类</div>
      </div>
    </div>



  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'safeProduction',//组件名称
  components: {},//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({

    });


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_safeProduction{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;

  ._wz_safeProduction_left{
    width: 350px;
    height: 100%;
    ._wz_safeProduction_left_list{
      height: calc((100% - 10px) / 2);
      background: rgba(0,0,0,0.6);
    }

  }
  ._wz_safeProduction_middle{
    width: calc(100% - 350px - 350px - 20px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    ._wz_safeProduction_middle_left{
      width: 300px;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      ._wz_safeProduction_middle_left_list{
        width: 100%;
        background: rgba(0,0,0,0.6);
        height: calc((100% - 20px) / 3);

      }

    }
    ._wz_safeProduction_middle_right{
      height: 100%;
      width: calc(100% - 300px - 10px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      ._wz_safeProduction_middle_right_top{
        height: calc(((100% - 20px) / 3) * 2 + 10px);
        background: rgba(0,0,0,0.6);
      }
      ._wz_safeProduction_middle_right_bottom{
        height: calc((100% - 20px) / 3);
        display: flex;
        justify-content: space-between;
        ._wz_safeProduction_middle_right_bottom_list{
          width: calc((100% - 20px) / 3);
          background: rgba(0,0,0,0.6);
          height: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  ._wz_safeProduction_right{
    width: 350px;
    height: 100%;
    ._wz_safeProduction_right_list{
      height: calc((100% - 10px) / 2);
      background: rgba(0,0,0,0.6);
    }
  }
}
</style>
